<template>
    <div :class="`review-ext-cost ${mode}`">
        <div class="cost-item" v-if="deliveryPrice">
            <div class="cost-name">配送费</div>
            <div class="cost-value title-color"><span class="label">￥</span>{{deliveryPrice}}</div>
        </div>
        <!-- <TechCell v-if="deliveryPrice" title="配送费" :value="`￥${deliveryPrice}`" :mode="mode" />
        <TechCell v-if="discountPrice" title="满减活动" type="red" :value="`- ￥${discountPrice}`"  :mode="mode" /> -->
    </div>
</template>

<script>
import ModeMixin from '@common/mixin';
export default {
    name: 'ReviewExtCost', // 额外费用信息
    mixins: [ModeMixin],
    props: {
        deliveryPrice: [Number, String],
        discountPrice: [Number, String],
    },
};
</script>

<style lang="less">
.review-ext-cost {
    &.black {
        .cost-item {
            .cost-name {
                color: #DEDEDE;
            }
        }
    }
    .cost-item {
        height: 44px;
        .flex();
        align-items: center;
        justify-content: space-between;
        .p-h(@shop-bag-gap);
        .cost-name {
            font-size: @font-size;
            color: @text-color;
        }
        .cost-value {
            font-size: @shop-font-size-md;
            font-weight: 500;
            font-family: @font-family-number;
            .label {
                .m-r(-3);
            }
        }
    }
}
</style>
